<tpl var layoutStyle={ />
<style>
	.wxmp-menus-form {
		justify-content: center;
		overflow: hidden;
		display: flex;
		height: 300px;
		width: 100%;
	}

	.wxmp-menus-form .wxmp-menus-root {
		width: 100px;
	}

	.wxmp-menus-form .wxmp-menus-item {
		cursor: pointer;
		height: 40px;
		font-size: 14px;
		line-height: 40px;
		text-align: center;
		border-bottom: 1px solid #ddd;
	}

	.wxmp-menus-form .wxmp-menus-title {
		cursor: pointer;
		height: 45px;
		font-size: 16px;
		line-height: 45px;
		text-align: center;
		border-bottom: 1px solid #ccc;
	}

	.wxmp-menus-form .wxmp-menus-sublist {
		box-sizing: border-box;
	}
</style>
<tpl }; />

<tpl var layoutBody={ />
<div data-identity="wxmp:menus" data-table="wxmp_menus">
	<div class="layui-breadcrumb">
		<a href="/manage/index.jspx">首页</a>
		<a href="/manage/wxmp/menus/index.jspx">菜单管理</a>
		<a href="javascript:;"> <cite>创建</cite></a>
	</div>
	<hr>
	<fieldset class="layui-elem-field">
		<legend>创建 菜单管理</legend>
		<div class="layui-field-box">
			<div class="layui-row">
				<div class="layui-col-sm7">
					<form class="layui-form" action="save.json?oper=update" lay-filter="mWxmpMenusForm">
						<div class="layui-form-item" data-type="varchar" data-isnull="NO" data-name="title">
							<label class="layui-form-label">菜单标题：</label>
							<div class="layui-input-block">
								<input type="text" name="title" data-obj="base" placeholder="请输入菜单标题" autocomplete="off" class="layui-input">
							</div>
						</div>
						<div class="layui-form-item" data-type="varchar" data-isnull="NO" data-name="appid">
							<label class="layui-form-label">微信公众号：</label>
							<div class="layui-input-block">
								<select name="appid" class="layui-input" data-obj="base">
									<option value="">请选择微信公众号</option>
									<tpl for(item in wxmps){ />
									<option value="${item.appid!}" ${selected(record.appid!,item.appid!)}>${item.name!}</option>
									<tpl } />
								</select>
							</div>
						</div>
						<fieldset class="layui-elem-field layui-field-title">
							<legend>匹配规则(如果一下内容全不填写，则视为默认方案)</legend>
							<div class="layui-field-box">
								<div class="layui-form-item" data-type="varchar" data-isnull="YES" data-name="tag_id">
									<label class="layui-form-label">用户标签：</label>
									<div class="layui-input-block">
										<input type="text" name="tagId" data-obj="matchrule" placeholder="请输入用户标签" autocomplete="off" class="layui-input">
									</div>
								</div>
								<div class="layui-form-item" data-type="varchar" data-isnull="YES" data-name="sex">
									<label class="layui-form-label">性别：</label>
									<div class="layui-input-block">
										<select name="sex" class="layui-input" data-obj="matchrule">
											<option value="">请选择性别</option>
											<option value="1">男</option>
											<option value="2">女</option>
											<option value="3">未知</option>
										</select>
									</div>
								</div>
								<div class="layui-form-item" data-type="enum" data-isnull="YES" data-name="country">
									<label class="layui-form-label">国家信息：</label>
									<div class="layui-input-block">
										<input type="text" name="country" data-obj="matchrule" placeholder="请输入国家信息" autocomplete="off" class="layui-input">
									</div>
								</div>
								<div class="layui-form-item" data-type="varchar" data-isnull="YES" data-name="province">
									<label class="layui-form-label">省份信息：</label>
									<div class="layui-input-block">
										<input type="text" name="province" data-obj="matchrule" placeholder="请输入省份信息" autocomplete="off" class="layui-input">
									</div>
								</div>
								<div class="layui-form-item" data-type="varchar" data-isnull="YES" data-name="city">
									<label class="layui-form-label">城市信息：</label>
									<div class="layui-input-block">
										<input type="text" name="city" data-obj="matchrule" placeholder="请输入城市信息" autocomplete="off" class="layui-input">
									</div>
								</div>
								<div class="layui-form-item" data-type="varchar" data-isnull="YES" data-name="client_platform_type">
									<label class="layui-form-label">客户端版本：</label>
									<div class="layui-input-block">
										<input type="text" name="clientPlatformType" data-obj="matchrule" placeholder="请输入客户端版本" autocomplete="off" class="layui-input">
									</div>
								</div>
								<div class="layui-form-item" data-type="varchar" data-isnull="YES" data-name="language">
									<label class="layui-form-label">语言信息：</label>
									<div class="layui-input-block">
										<input type="text" name="language" data-obj="matchrule" placeholder="请输入语言信息" autocomplete="off" class="layui-input">
									</div>
								</div>
							</div>
						</fieldset>
						<div class="layui-form-item">
							<div class="layui-input-block">
								<a class="layui-btn layui-btn-primary" href="javascript:history.go(-1)">返回</a>
								<button class="layui-btn" lay-submit lay-filter="mWxmpMenusForm">立即提交</button>
							</div>
						</div>
					</form>
				</div>
				<div class="layui-col-sm5">
					<div class="wxmp-menus-form"></div>
					<div class="layui-form">
						<div class="layui-form-item" data-type="varchar" data-isnull="NO" data-name="name" data-autofill="input">
							<label class="layui-form-label">按钮名称：</label>
							<div class="layui-input-block">
								<input type="text" name="name" id="menus-btn-name" placeholder="请输入按钮名称" autocomplete="off" class="layui-input">
							</div>
						</div>
						<div class="layui-form-item" data-type="varchar" data-isnull="NO" data-name="type" data-autofill="select">
							<label class="layui-form-label">按钮类型：</label>
							<div class="layui-input-block">
								<select name="type" class="layui-input" lay-filter="menus-button-type">
									<option value="view">网页类型</option>
									<option value="click">点击类型</option>
									<option value="miniprogram">小程序类型</option>
								</select>
							</div>
						</div>
						<div class="layui-form-item hidden" data-type="varchar" data-isnull="NO" data-name="url" data-autofill="input" data-hiden="type" data-key="view">
							<label class="layui-form-label">网页地址：</label>
							<div class="layui-input-block">
								<input type="text" name="url" placeholder="请输入网页地址" autocomplete="off" class="layui-input">
							</div>
						</div>
						<div class="layui-form-item hidden" data-type="varchar" data-isnull="NO" data-name="key" data-autofill="input" data-hiden="type" data-key="click">
							<label class="layui-form-label">事件名称：</label>
							<div class="layui-input-block">
								<input type="text" name="key" placeholder="请输入事件名称" autocomplete="off" class="layui-input">
							</div>
						</div>
						<div class="layui-form-item hidden" data-type="varchar" data-isnull="NO" data-name="appid" data-autofill="input" data-hiden="type" data-key="miniprogram">
							<label class="layui-form-label">APPID：</label>
							<div class="layui-input-block">
								<input type="text" name="appid" placeholder="请输入小程序的APPID" autocomplete="off" class="layui-input">
							</div>
						</div>
						<div class="layui-form-item hidden" data-type="varchar" data-isnull="NO" data-name="appid" data-autofill="input" data-hiden="type" data-key="miniprogram">
							<label class="layui-form-label">页面路径：</label>
							<div class="layui-input-block">
								<input type="text" name="pagepath" placeholder="请输入小程序的页面路径" autocomplete="off" class="layui-input">
							</div>
						</div>
						<div class="layui-form-item">
							<label class="layui-form-label"></label>
							<div class="layui-input-block">
								<button class="layui-btn" type="button" id="menus-button-add-one">添加(一级)</button>
								<button class="layui-btn" type="button" id="menus-button-add-two">添加(二级)</button>
								<button class="layui-btn" type="button" id="menus-button-update">修改</button>
								<button class="layui-btn" type="button" id="menus-button-del">删除</button>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</fieldset>
</div>
<tpl }; />

<tpl var layoutScript={ />
<script type="text/javascript">
	layui.config({
		base: '${webCdn}/plugins/layui/modules/'
	}).extend({
		http: 'http/http.min',
		message: 'message/message.min'
	}).use(['element', 'message', 'form', 'laytpl', 'http'], function () {
		// 绑定表单提交事件
		layui.form.on('submit(mWxmpMenusForm)', function (data) {
			var param = {
				matchrule: {},
				buttons: []
			};

			$('[data-obj="base"]').each((i, item) => {
				param[item.name] = $(item).val();
			});

			$('[data-obj="matchrule"]').each((i, item) => {
				param['matchrule'][item.name] = $(item).val();
			});

			param.buttons = $('.wxmp-menus-root').map((i, item) => {
				return Object.assign($(item).find('.wxmp-menus-title').data(), {
					'sub': $(item).find('.wxmp-menus-item').map((a, item2) => {
						return $(item2).data();
					}).toArray()
				});
			}).toArray();

			layui.http.json(`save.json?oper=create0&appid=\${param.appid}`, param, function (res) {
				layui.message.success(res.message, () => history.back());
			});

			return false;
		});

		// 点击按钮，加载按钮信息到编辑框 
		$('.wxmp-menus-form').on('click', '.wxmp-menus-title,.wxmp-menus-item', function () {
			$('[data-autofill="input"] input').each((idx, item) => {
				$(item).val($(this).data(item.name));
			});
			$('[data-autofill="select"] select').each((idx, item) => {
				$(item).val($(this).data(item.name));
			});

			// 将被点击的按钮信息添加到控制键上
			$('button#menus-button-add-one').data('elem', this);
			$('button#menus-button-add-two').data('elem', this);
			$('button#menus-button-update').data('elem', this);
			$('button#menus-button-del').data('elem', this);

			// 重新渲染按钮表单样式
			layui.event('form', 'select(menus-button-type)', {
				value: $(this).data('type')
			});

			layui.form.render('select');
		});

		$('button#menus-button-add-one').on('click', function () {
			var html = [
				'<div class="wxmp-menus-root">',
				'<div class="wxmp-menus-title" '
			];

			// 将表单里面的按钮信息提取出来
			$('[data-autofill="input"] input').each((idx, item) => {
				html.push(` data-\${item.name}="\${$(item).val()}"`);
			});

			$('[data-autofill="select"] select').each((idx, item) => {
				html.push(` data-\${item.name}="\${$(item).val()}"`);
			});

			// 获取按钮的名称
			html.push(`>\${$('#menus-btn-name').val()}</div>`);
			html.push('<div class="wxmp-menus-sublist"></div>');

			// 将按钮添加到界面
			$('.wxmp-menus-form').append(html.join(''));
		});

		$('button#menus-button-add-two').on('click', function () {
			var elem = $(this).data('elem');

			if (!!elem && $(elem).hasClass('wxmp-menus-title')) {
				var html = ['<div class="wxmp-menus-item"'];

				$('[data-autofill="input"] input').each((idx, item) => {
					html.push(` data-\${item.name}="\${$(item).val()}"`);
				});

				$('[data-autofill="select"] select').each((idx, item) => {
					html.push(` data-\${item.name}="\${$(item).val()}"`);
				});

				html.push(`>\${$('#menus-btn-name').val()}</div>`);

				$(elem).siblings('.wxmp-menus-sublist').append(html.join(''));
			}
		});
		$('button#menus-button-update').on('click', function () {
			var elem = $(this).data('elem');
			if (!elem) return;

			// 将表单里面的按钮信息提取出来
			$('[data-autofill="input"] input').each((idx, item) => {
				$(elem).data(item.name, $(item).val());
			});

			$('[data-autofill="select"] select').each((idx, item) => {
				$(elem).data(item.name, $(item).val());
			});

			// 刷新按钮名称显示
			$(elem).text($('#menus-btn-name').val());
		});
		$('button#menus-button-del').on('click', function () {
			var elem = $(this).data('elem');

			if (!!elem && $(elem).hasClass('wxmp-menus-title')) {
				$(elem).parent().remove();
			} else if (!!elem) {
				$(elem).remove();
			} else {

			}
		});

		// 绑定按钮类型被选择后，切换表单事件
		layui.form.on('select(menus-button-type)', function (data) {
			$(`[data-hiden="type"][data-key!="\${data.value}"]`).addClass('hidden');
			$(`[data-hiden="type"][data-key="\${data.value}"]`).removeClass('hidden');
		});

		// 打开页面后，触发一次按钮类型被选择
		layui.event('form', 'select(menus-button-type)', {
			value: 'view'
		});
	});
</script>
<tpl }; />
<tpl include( "../../tpl/layout-scroll.html" ,{identity:"wxmp:menus",layoutStyle:layoutStyle,layoutBody:layoutBody,layoutScript:layoutScript}){} />